{extend name="public/base"/}
{block name="css"}
<link href="{$Think.HOME_STATIC}css/article.css" rel="stylesheet">
<link href="{$Think.HOME_STATIC}css/editormd.css" rel="stylesheet">
<link href="{$Think.EDITOR_PATH}lib/codemirror/codemirror.min.css" rel="stylesheet">
<link href="{$Think.HOME_STATIC}css/font-awesome.min.css" rel="stylesheet">
{/block}

{block name="center_main"}
<div id="article" class="float-left">
    <h2 id="article_title"></h2>
    <h3 id="article_description"></h3>
    <div id="articleContent"></div>
</div>
<div id="catalog">
    <h2>目录</h2>
    <div id="articleCatalog" class="markdown-body editormd-preview-container float-left" previewcontainer="false"></div>
</div>
{/block}


{block name="footer_js"}
<script src="{$Think.STATIC_PATH}js/require.min.js"></script>
<script type="text/javascript">
    require.config({
        baseUrl: "{$Think.EDITOR_PATH}",
        paths: {
            jquery: "../js/jquery.min",
            marked: "lib/marked.min",
            prettify: "lib/prettify.min",
            raphael: "lib/raphael.min",
            underscore: "lib/underscore.min",
            flowchart: "lib/flowchart.min",
            jqueryflowchart: "lib/jquery.flowchart.min",
            sequenceDiagram: "lib/sequence-diagram.min",
            katex: "lib/katex.min",
            editormd: "editormd.amd",
            chapter: "../home/js/notebook.chapter",
            hDialog: "../home/js/jquery.hDialog"
        },
        shim: {
            'hDialog': {
                deps: ['jquery', 'raphael']
            },
            'editormd': {
                deps: ['flowchart', 'hDialog']
            },
            'chapter': {
                deps: ['editormd']
            }
        },
        waitSeconds: 30
    });

    var deps = [
        "editormd",
        "hDialog",
        "chapter",
        "../editor.md-master/plugins/link-dialog/link-dialog",
        "../editor.md-master/plugins/reference-link-dialog/reference-link-dialog",
        "../editor.md-master/plugins/image-dialog/image-dialog",
        "../editor.md-master/plugins/code-block-dialog/code-block-dialog",
        "../editor.md-master/plugins/table-dialog/table-dialog",
        "../editor.md-master/plugins/emoji-dialog/emoji-dialog",
        "../editor.md-master/plugins/goto-line-dialog/goto-line-dialog",
        "../editor.md-master/plugins/help-dialog/help-dialog",
        "../editor.md-master/plugins/html-entities-dialog/html-entities-dialog",
        "../editor.md-master/plugins/preformatted-text-dialog/preformatted-text-dialog"
    ];

    require(deps, function (editormd) {
        $.ajax({
           type: "POST",
           url : "/home/notebook/getArticle",
           data:{
               id: '{$id}'
           },
           success:function (result) {
               editormd.markdownToHTML("article_title", {
                   markdown: result.data.article_title
               });
               $('#article_title').removeAttr('class');
               editormd.markdownToHTML("article_description", {
                   markdown: result.data.article_description
               });
               $('#article_description').prepend('文章描述：');
               $('#article_description p').prepend('&emsp;&emsp;');

               editormd.markdownToHTML("articleContent", {
                   markdown: result.data.article_content,
                   tocm: true,
                   tocContainer: "#articleCatalog",
                   tocDropdown: false
               });
           }
        });

        $("body").Chapter({
            simIcon: "fa fa-file fa-inverse isfile",
            mouIconOpen: "fa fa-folder-open-o fa-inverse isfolder",
            mouIconClose: "fa fa-folder fa-inverse isfolder",
            mouIconEmpty: "fa fa-folder-o isfolder",
            getArticleListUrl: "{:url('home/notebook/getArticleList')}",
            getArticleUrl: "{:url('home/notebook/getArticle')}",
            editormd: editormd,
            callbackEdit: function (id) {
                alert(id);
            }

        });
    });
</script>

{/block}